<template>
  <view class="root">
    <view class="inner wrapper-item top">
      <view class="title">
        关怀情况
      </view>
      <view class="item">
        <view class="i-label">
          关怀标题:
        </view>
        <view class="i-value">
          {{`${details.mentalPatientName}${moment(details.create_time).format('MM月DD日')}*关怀记录*`}}
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          关怀时间:
        </view>
        <view class="i-value">
          {{details.help_time ? moment(details.help_time).format('YYYY/MM/DD HH:mm') : '暂无'}}
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          线索地点:
        </view>
        <view class="i-value">
          {{details.help_address}}
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          关怀描述:
        </view>
        <view class="i-value">
          {{details.help_describe}}
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          音频信息:
        </view>
        <view class="i-value" style="flex: 1;">
          <yy-play-audio-detail v-if="audioSrc" :audio-src="audioSrc" style="flex: 1"></yy-play-audio-detail>
          <view v-else>暂无</view>
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          图片信息:
        </view>
        <view class="i-value">
          <template v-if="imgList && imgList.length">
            <image @click="handlePreviewImg(imgList)" class="caring-img" mode="aspectFill"
              v-for="(item, index) in imgList" :key="index" :src="item">
            </image>
          </template>
          <view v-else>暂无</view>
        </view>
      </view>
    </view>
    <view class="inner wrapper-item bottom">
      <view class="title">
        操作信息
      </view>
      <view class="item">
        <view class="i-label">
          关怀人员:
        </view>
        <view class="i-value">
          {{details.helpName}}
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          角色类型:
        </view>
        <view class="i-value">
          {{details.helpPersonTypeText}}
        </view>
      </view>
      <view class="item">
        <view class="i-label">
          提交时间:
        </view>
        <view class="i-value">
          {{details.create_time}}
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    helpinforecordsDetails
  } from '../api/api';
  import {
    getOptionsParams,
    isLoading,
    previewImage
  } from '../utils/util';
  import moment from '../utils/moment';

  export default {
    data() {
      return {
        details: {},
        routerParams: {},
        audioSrc: null,
        imgPrefix: uni.getStorageSync('imgPrefix'),
        imgList: []
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.initData()
    },
    methods: {
      moment,
      initData() {
        isLoading(true)
        helpinforecordsDetails({
            id: this.routerParams.id,
          })
          .then((res) => {
            this.details = res.result
            if (this.details.help_video) {
              this.audioSrc = this.imgPrefix + this.details.help_video
            }
            if (this.details.help_pic) {
              this.imgList = this.details.help_pic.split(',').map(item => {
                return this.imgPrefix + item
              })
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handlePreviewImg(urls) {
        previewImage(urls)
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    padding: 16rpx;

    .wrapper-item {
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.16);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 0 27rpx;

      .title {
        padding: 26rpx 0;
        border-bottom: 1px solid #ececec;
        margin-bottom: 25rpx;
        font-weight: bold;
        font-size: 32rpx;
      }

      .item {
        display: flex;
        margin-bottom: 25rpx;

        .i-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #A2A2A2;
          flex-shrink: 0;
          margin-right: 23rpx;
        }

        .caring-img {
          width: 240rpx;
          height: 180rpx;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          margin-right: 20rpx;

          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }
    }

    .top {
      padding-bottom: 40rpx;
    }

    .bottom {
      margin-top: 10rpx;
      padding-bottom: 62rpx;
    }

    .inner {}
  }
</style>